<template>
    <div class="main-scrollbar">
        <div class="main-header">
            <el-tabs v-model="active" style="width:100%;" type="border-card">
                <!-- <el-tab-pane v-for="(item, index) in basicFormData" :key="index" :label="item.title" :name="item.name"> -->
                <el-tab-pane :label="basicFormData.basics?.title" :name="basicFormData.basics?.name">
                    <el-form>
                        <!-- <el-form-item :label="sitem.title" :prop="sitem.name" v-for="(sitem, sindex) in item.list"
                            :key="sindex"> -->
                        <el-form-item :label="sitem.title" v-for="(sitem, sindex) in basicFormData.basics?.list"
                            :key="sindex">
                            <el-input v-if="sitem.type === 'string'" v-model="sitem.value"
                                :placeholder="sitem.tip"></el-input>
                            <el-input v-else-if="sitem.type === 'textarea'" type="textarea" rows="5"
                                :placeholder="sitem.tip" v-model="sitem.value"></el-input>
                            <el-select v-model="sitem.value" :placeholder="sitem.tip" v-else-if="sitem.type === 'select'">
                                <el-option v-for="(ssitem, ssindex) in sitem.content" :key="ssindex" :label="ssitem"
                                    :value="ssitem"></el-option>
                            </el-select>
                            <template v-else-if="sitem.type === 'array'">
                                <el-row style="width:100%;margin:10px 0;" v-for="(ssitem, ssindex) in sitem.value"
                                    :key="ssindex" type="flex" :gutter="10">
                                    <el-col :span="12">
                                        <el-input v-model="ssitem.key"></el-input>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-input v-model="ssitem.value"></el-input>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-button @click="save">保存</el-button>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { get, post } from "@/assets/js/http.js";

export default {
    name: "view-system-config",
    data() {
        return {
            active: "basics",
            basicFormData: []
        };
    },
    mounted() {
        this.getConfigData();
    },
    watch: {
        basicFormData: {
            handler: function (newValue, oldValue) {
                console.log(this.basicFormData)
            },
            deep: true
        }
    },
    methods: {
        async getConfigData() {
            const result = await get({
                url: "/admin/routine.config/index",
                params: {
                    quick_search: ""
                }
            });
            this.basicFormData = result.list;
            console.log(result);
        },
        async save() {
            let params = {

            }
            this.basicFormData.basics.list.forEach((item) => {
                params[item.name] = item.value;
            })
            await post({
                url: '/admin/routine.Config/edit',
                data: params
            })
        }
    }
};
</script>
